<template>
    <canvas id="ice-1_1" width="600" height="300"></canvas>
  </template>
  
  <script setup lang="ts">
//   创建渐变三角形
  import { onMounted } from 'vue'
  import {
    createGl,
    createShader,
    createProgram,
    createBuffer
  } from '@/utils'
  
  const vertexCode = `
    attribute vec4 a_Position;
    attribute vec4 a_Color;
    varying vec4 v_Color;
  
    void main () {
      gl_Position = a_Position;
      v_Color= a_Color;
    }
  `
  
  const fragmentCode = `
    precision mediump float;
    varying vec4 v_Color;
  
    void main () {
      gl_FragColor = v_Color;
    }
  `
  
  let gl, a_Position, canvas:any, a_Color
  
  const initGl = () => {
    gl = createGl('#ice-1_1')
  
    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexCode)
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentCode)
  
    const program = createProgram(gl, vertexShader, fragmentShader)
  
    a_Position = gl.getAttribLocation(program, 'a_Position')
    a_Color = gl.getAttribLocation(program, 'a_Color')
    const vertices = new Float32Array([
      -.5, -.5,
      0., .8,
      .5, -.5,
    ])
    const colors = new Float32Array([
      1., 0., 0., 1.,
      0., 1., 0., 1.,
      0., 0., 1., 1.,
    ])
  
    // 顶点坐标
    createBuffer(gl, gl.ARRAY_BUFFER, vertices, a_Position, 2)
    // 颜色值
    createBuffer(gl, gl.ARRAY_BUFFER, colors, a_Color, 4)
  
    gl.clearColor(0., 0., 0., .9)
    gl.clear(gl.COLOR_BUFFER_BIT)
    gl.drawArrays(gl.TRIANGLES, 0, 3)
  }
  
  onMounted(() => {
    initGl()
  })
  </script>
  
  <script lang="ts">
  import { defineComponent } from 'vue'
  
  export default defineComponent({
    name: 'Third1_1'
  })
  </script>
  